<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="box">


    </div>
    <script>
        let boxele = document.querySelector(".box");
        // 1.setInterval版本
        // let num = 0;
        // setInterval(() => {
        //     num++;
        //     let leftNum = parseInt( getComputedStyle(boxele,null)['left']);
        //     let speed = 5;
        //     document.title = num;
        //     boxele.style.left = leftNum + speed + "px"
        // }, 100);
        // 2.setTimeout版本
        // function run() {
        //     setTimeout(() => {
        //         let leftNum = parseInt(getComputedStyle(boxele, null)['left']);
        //         let speed = 5;
        //         boxele.style.left = leftNum + speed + "px";
        //         run();
        //     }, 100);
        // }
        // run();

        // 3.requireAnimationFrame 动画帧
        let num = 1;
        function run() {
            let leftNum = parseInt(getComputedStyle(boxele, null)['left']);
            let speed = 1;
            if(num%5==0){
                boxele.style.left = leftNum + speed + "px";
            }
            
            document.title = num;
            num++;
            requestAnimationFrame(run);
        }
        run();


    </script>
</body>

</html>